<template>
  <div class="mainPage">
    <div class="content-header">
      <div>{{ ServerInfo.IP }}</div>
      <router-link style="font-size:16px" :to="{ name: 'NodeUsability' }"
        >关闭</router-link
      >
    </div>
    <div class="content-main">
      <div class="container-fluid">
        <div class="callout callout-info">
          <div class="head">
            <i class="el-icon-info"></i>
            <i>系统信息:</i>
          </div>
          <div class="main">
            <strong>主机名:</strong>
            <span>{{ this.tableData[0].HOSTNAME }}，</span>
            <strong>平台:</strong>
            <span>{{ this.tableData[0].RELEASE }}，</span>
            <strong>CPU核数:</strong>
            <span>{{ this.tableData[0].CPU_COUNT }}，</span>
            <strong>物理内存:</strong>
            <span>{{ this.tableData[0].MEMORY_GB }}，</span>
            <strong>运行时间:</strong>
            <span>{{ this.tableData[0].SYSUPTIME }}，</span>
            <strong>系统会话:</strong>
            <span>{{ this.tableData[0].HRSYSTEMNUMUSERS }}，</span>
            <strong>系统进程:</strong>
            <span>{{ this.tableData[0].HRSYSTEMPROCESSES }}，</span>
          </div>
        </div>
        <!-- <el-row :gutter="20">
          <el-col :sm="12" :md="6" :lg="6">
            <div class="mainPage-info-box">
              <div class="left bg-info">
                <i class="el-icon-s-tools" style="color:#fff"></i>
              </div>
              <div class="right">
                <span>当前CPU使用率</span>
                <span>5.05%</span>
              </div>
            </div>
          </el-col>
          <el-col :sm="12" :md="6" :lg="6">
            <div class="mainPage-info-box">
              <div class="left bg-danger">
                <i class="el-icon-star-off" style="color:#fff"></i>
              </div>
              <div class="right">
                <span>当前内存使用率</span>
                <span>5.05%</span>
              </div>
            </div>
          </el-col>
        </el-row> -->
        <el-row style="margin-top:15px" :gutter="15">
          <el-col :md="12">
            <vCpuAndIoLoad />
          
          </el-col>
          <el-col :md="12">
            <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>文件系统</span>
            </div>
            <div>
              <vFileSystem />
            </div>
          </el-card>
          </el-col>
        </el-row>
        <!-- <el-row style="margin-top:15px">
          <vCpuAndIoLoad />
        </el-row> -->
        <el-row style="margin-top:15px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>系统进程TOP10(仅限linux系统)</span>
            </div>
            <div>
              <vPIDTop />
            </div>
          </el-card>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import vFileSystem from "./component/FileSystem.vue";
import vCpuAndIoLoad from "./component/CpuAndIoLoad.vue";
import vPIDTop from "./component/PIDTop.vue";
import { GetItem } from "@/utils/dataStore";
import { fetchData } from "@/api/index.js";
export default {
  components: {
    vFileSystem,
    vCpuAndIoLoad,
    vPIDTop,
  },
  created() {
    GetItem(sessionStorage.getItem("PushId")).then((_) => {
      this.ServerInfo = _[0].articleAddress;
      this.selectedMonID = _[0].articleAddress;
      this.getTableData();
    });
  },
  data() {
    return {
      ServerInfo: "",
      postData: {
        opera: "ospanlinfo",
        curPage: 1,
        pageSize: 20,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {
          monid: "",
        },
      },
      postSearchData: {
        opera: "hostconnect",
        curPage: 1,
        pageSize: 2000,
        sort: {
          sortColumn: "monid",
          sortOrders: "asc",
        },
        filtersType: "fuzzyquery",
        filters: {},
      },
      selectedMonID: "",
      tableData: [{
        HOSTNAME:"",
        RELEASE:"",
        CPU_COUNT:"",
        MEMORY_GB:"",
        SYSUPTIME:"",
        HRSYSTEMNUMUSERS:"",
        HRSYSTEMPROCESSES:"",
      }],
    };
  },
  methods: {
    getTableData() {
      fetchData({
        postSearchData: JSON.stringify(this.postSearchData),
      })
        .then((_) => _.data)
        .then((resultData) => {
          this.postData.filters.monid = resultData.filter(
            (_) => _.IP == this.selectedMonID.IP
          )[0]
            ? resultData.filter((_) => _.IP == this.selectedMonID.IP)[0].MONID
            : "";

          if (!this.postData.filters.monid) {
          } else {
            fetchData({ postData: JSON.stringify(this.postData) }).then(
              (res) => {
                this.tableData = res.data;
              }
            );
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.mainPage {
  background: #ededed;
  min-height: 97vh;
  width: 100%;
  overflow-y: scroll;
  .content-header {
    padding: 15px;
    font-size: 1.25rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .content-main {
    padding: 15px;
    .container-fluid {
      width: 100%;
      /deep/ .el-card__body {
        padding: 0 0 0 0;
      }
      .callout-info {
        border-left-color: #117a8b;
        .head {
          font-size: 1rem;
          i {
            font-style: normal;
          }
        }
        .main {
          font-size: 0.9rem;
        }
      }
      .mainPage-info-box {
        padding: 5px;
        .left {
          border-radius: 0.25rem;
          -ms-flex-align: center;
          align-items: center;
          display: -ms-flexbox;
          display: flex;
          font-size: 1.875rem;
          -ms-flex-pack: center;
          justify-content: center;
          text-align: center;
          width: 70px;
          min-height: 70px;
        }
      }
    }
  }
}
.mainPage::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.mainPage::-webkit-scrollbar-thumb {
  background-color: rgba(4, 44, 119, 0.7);
  border-radius: 3px;
}
.box-card {
  max-height: 360px;
}
/deep/ .el-card.is-always-shadow {
  box-shadow: 0 0 1px #00000021, 0 1px 3px #0003;
}
</style>
